<template> <header class="topbar" data-navbarbg="skin5">
  <nav class="navbar top-navbar navbar-expand-md navbar-dark">
    <div class="navbar-header" data-logobg="skin5">
      <a class="nav-toggler waves-effect waves-light d-block d-md-none" href="javascript:void(0)">
        <i class="ti-menu ti-close"></i>
      </a>
      <a class="navbar-brand" href="index.html">
        <b class="logo-icon p-l-10"> <img src="../assets/images/logo-icon.png" alt="homepage" class="light-logo">
        </b> <span class="logo-text"> <img src="../assets/images/logo-new.png" alt="homepage" class="light-logo">
        </span>
      </a>
      <!-- ============================================================== -->
      <!-- Toggle which is visible on mobile only -->
      <!-- ============================================================== -->
      <a class="topbartoggler d-block d-md-none waves-effect waves-light" href="javascript:void(0)" data-toggle="collapse"
        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <i class="ti-more"></i>
      </a>
    </div>
    <div class="navbar-collapse collapse" id="navbarSupportedContent" data-navbarbg="skin5">
      <ul class="navbar-nav float-left mr-auto">
        <li class="nav-item d-none d-md-block">
          <a class="nav-link sidebartoggler waves-effect waves-light" href="javascript:void(0)" data-sidebartype="mini-sidebar">
            <i class="mdi mdi-menu font-24"></i>
          </a>
        </li>
      </ul>
      <ul class="navbar-nav float-right">
        <li class="nav-item">
          <a class="nav-link text-white">{{name}}</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark pro-pic" href data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">
            <img src="../assets/images/users/1.jpg" alt="user" class="rounded-circle" width="31">
          </a>
          <div class="dropdown-menu dropdown-menu-right user-dd animated">
            <!-- 
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="javascript:void(0)">
                <i class="ti-settings m-r-5 m-l-5"></i>个人信息
              </a>
              <a class="dropdown-item" href="javascript:void(0)">
                <i class="ti-settings m-r-5 m-l-5"></i>修改密码
              </a>
              <div class="dropdown-divider"></div>
               -->
            <div class="p-l-30 p-10">
              <a href="javascript:void(0)" v-on:click='logout' class="btn btn-sm btn-danger">
                <i class="fa fa-power-off m-r-5 m-l-5"></i>退出
              </a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</header> </template>
<script>
  import $ from 'jquery'
  import cfg from '../dist/js/config'


  // this is for close icon when navigation open in mobile view
  $(document).on('click', ".nav-toggler", function() {
    $("#main-wrapper").toggleClass("show-sidebar");
    $(".nav-toggler i").toggleClass("ti-menu");
  });

  //****************************
  /* This is for the mini-sidebar if width is less then 1170*/
  //**************************** 
  var setsidebartype = function() {
    var width = (window.innerWidth > 0) ? window.innerWidth : this.screen.width;
    if (width < 1170) {
      $("#main-wrapper").attr("data-sidebartype", "mini-sidebar");
    } else {
      $("#main-wrapper").attr("data-sidebartype", "full");
    }
  };
  $(window).ready(setsidebartype);
  $(window).on("resize", setsidebartype);
  //****************************
  /* This is for sidebartoggler*/
  //****************************
  $(document).on("click", '.sidebartoggler', function() {
    $("#main-wrapper").toggleClass("mini-sidebar");
    if ($("#main-wrapper").hasClass("mini-sidebar")) {
      $(".sidebartoggler").prop("checked", !0);
      $("#main-wrapper").attr("data-sidebartype", "mini-sidebar");
    } else {
      $(".sidebartoggler").prop("checked", !1);
      $("#main-wrapper").attr("data-sidebartype", "full");
    }
  });
  function loadName() {
    $.get(cfg.serverPath + '/login/name', result => {
      this.name = result.data
    })
  }
  function logout() {
    $.get(cfg.serverPath + '/admin/logout', () => {
      this.$router.push('/login')
    })
  }
  export default {
    data() {
      return {
        name
      }
    },
    methods: {
      loadName,
      logout
    },
    created() {
      this.loadName()
    }
  }
</script>
